import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

// 动画骰子组件，显示律迹骰
const AnimatedDice = ({
  value = null,
  rolling = false,
  onRollEnd = () => {},
  size = 80,
  color = '#a67c00',
  shadowColor = 'rgba(0, 0, 0, 0.3)',
  rollDuration = 2,
  style = {},
  className = '',
}) => {
  // 骰子点数状态
  const [diceValue, setDiceValue] = useState(value !== null ? value : Math.floor(Math.random() * 6) + 1);
  const [isRolling, setIsRolling] = useState(rolling);
  
  // 同步外部value变化
  useEffect(() => {
    if (!rolling) {
      setDiceValue(value !== null ? value : Math.floor(Math.random() * 6) + 1);
    }
  }, [value, rolling]);
  
  // 监听外部传入的rolling属性变化
  useEffect(() => {
    if (rolling && !isRolling) {
      setIsRolling(true);
      
      // 模拟骰子滚动效果
      const rollInterval = setInterval(() => {
        setDiceValue(Math.floor(Math.random() * 6) + 1);
      }, 100);
      
      // 一段时间后停止滚动
      setTimeout(() => {
        clearInterval(rollInterval);
        const finalValue = value || Math.floor(Math.random() * 6) + 1;
        setDiceValue(finalValue);
        setIsRolling(false);
        onRollEnd(finalValue);
      }, rollDuration * 1000);
      
      return () => clearInterval(rollInterval);
    }
  }, [rolling, value, rollDuration, onRollEnd]);
  
  // 骰子动画变体
  const diceVariants = {
    rolling: {
      rotate: [0, 360, 720, 1080],
      scale: [1, 1.2, 0.8, 1.1, 0.9, 1],
      transition: {
        duration: rollDuration,
        ease: "easeInOut"
      }
    },
    idle: {
      rotate: 0,
      scale: 1,
      transition: {
        duration: 0.5
      }
    }
  };
  
  // 每个面的点数布局
  const renderDots = (num) => {
    if (num === 0) {
      return (
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: '100%',
          height: '100%',
          fontSize: size * 0.6,
          color: color,
          fontWeight: 'bold',
          userSelect: 'none',
        }}>
          ?
        </div>
      );
    }
    switch (num) {
      case 1:
        return (
          <div style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
            height: '100%',
          }}>
            <div style={{
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
          </div>
        );
      case 2:
        return (
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            width: '100%',
            height: '100%',
            padding: size * 0.15
          }}>
            <div style={{
              alignSelf: 'flex-start',
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
            <div style={{
              alignSelf: 'flex-end',
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
          </div>
        );
      case 3:
        return (
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            width: '100%',
            height: '100%',
            padding: size * 0.15
          }}>
            <div style={{
              alignSelf: 'flex-start',
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
            <div style={{
              alignSelf: 'center',
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
            <div style={{
              alignSelf: 'flex-end',
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
          </div>
        );
      case 4:
        return (
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            justifyContent: 'space-between',
            width: '100%',
            height: '100%',
            padding: size * 0.15
          }}>
            <div style={{
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
            <div style={{
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
            <div style={{
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
            <div style={{
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
          </div>
        );
      case 5:
        return (
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            justifyContent: 'space-between',
            width: '100%',
            height: '100%',
            padding: size * 0.15
          }}>
            <div style={{
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
            <div style={{
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
            <div style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
            <div style={{
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
            <div style={{
              width: size * 0.15,
              height: size * 0.15,
              borderRadius: '50%',
              backgroundColor: color
            }}></div>
          </div>
        );
      case 6:
        return (
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            alignContent: 'space-between',
            width: '100%',
            height: '100%',
            padding: size * 0.15
          }}>
            <div style={{
              width: '50%',
              height: size * 0.2,
              display: 'flex',
              justifyContent: 'flex-start'
            }}>
              <div style={{
                width: size * 0.15,
                height: size * 0.15,
                borderRadius: '50%',
                backgroundColor: color
              }}></div>
            </div>
            <div style={{
              width: '50%',
              height: size * 0.2,
              display: 'flex',
              justifyContent: 'flex-end'
            }}>
              <div style={{
                width: size * 0.15,
                height: size * 0.15,
                borderRadius: '50%',
                backgroundColor: color
              }}></div>
            </div>
            <div style={{
              width: '50%',
              height: size * 0.2,
              display: 'flex',
              justifyContent: 'flex-start'
            }}>
              <div style={{
                width: size * 0.15,
                height: size * 0.15,
                borderRadius: '50%',
                backgroundColor: color
              }}></div>
            </div>
            <div style={{
              width: '50%',
              height: size * 0.2,
              display: 'flex',
              justifyContent: 'flex-end'
            }}>
              <div style={{
                width: size * 0.15,
                height: size * 0.15,
                borderRadius: '50%',
                backgroundColor: color
              }}></div>
            </div>
            <div style={{
              width: '50%',
              height: size * 0.2,
              display: 'flex',
              justifyContent: 'flex-start'
            }}>
              <div style={{
                width: size * 0.15,
                height: size * 0.15,
                borderRadius: '50%',
                backgroundColor: color
              }}></div>
            </div>
            <div style={{
              width: '50%',
              height: size * 0.2,
              display: 'flex',
              justifyContent: 'flex-end'
            }}>
              <div style={{
                width: size * 0.15,
                height: size * 0.15,
                borderRadius: '50%',
                backgroundColor: color
              }}></div>
            </div>
          </div>
        );
      default:
        return null;
    }
  };
  
  // 骰子效果说明
  const getDiceEffect = (value) => {
    if (value === 0) return '';
    switch (value) {
      case 1:
        return '增加3点法盾值 🛡️';
      case 2:
        return '增加3点律刃值 ⚔️';
      case 3:
        return '增加2点法盾值和2点律刃值 🛡️⚔️';
      case 4:
        return '增加1个律迹骰 🎲';
      case 5:
        return '当前律刃值翻倍 ⚔️✨';
      case 6:
        return '当前法盾值翻倍 🛡️✨';
      default:
        return '';
    }
  };
  
  return (
    <div style={{ display: 'inline-block', position: 'relative', ...style }} className={className}>
      <motion.div
        variants={diceVariants}
        animate={isRolling ? 'rolling' : 'idle'}
        style={{
          width: size,
          height: size,
          backgroundColor: '#f8f0dd',
          borderRadius: size * 0.15,
          boxShadow: `0 ${size * 0.05}px ${size * 0.1}px ${shadowColor}`,
          position: 'relative',
          overflow: 'hidden'
        }}
      >
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          border: `${size * 0.03}px solid ${color}`,
          borderRadius: size * 0.12,
          boxSizing: 'border-box'
        }} />
        
        {/* 骰子点数 */}
        {renderDots(diceValue)}
        
        {/* 法律纹理装饰 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          backgroundImage: `radial-gradient(
            circle at center,
            rgba(166, 124, 0, 0.05) 0%,
            rgba(166, 124, 0, 0) 70%
          )`,
          pointerEvents: 'none'
        }} />
      </motion.div>
      
      {/* 骰子效果说明 */}
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: isRolling ? 0 : 1, y: isRolling ? 10 : 0 }}
        transition={{ delay: isRolling ? 0 : 0.3 }}
        style={{
          marginTop: 8,
          fontSize: size * 0.2,
          textAlign: 'center',
          color: color,
          fontWeight: 500,
          maxWidth: size * 2,
        }}
      >
        {getDiceEffect(diceValue)}
      </motion.div>
    </div>
  );
};

export default AnimatedDice; 